<script setup>

</script>

<template>
 <div class="py-2 flex justify-center">
   <div class="navbar inline-flex py-0.5 items-center">
     <div class="me-8">
       <RouterLink to="/">
         <img src="../assets/logo.svg" alt="logo">
       </RouterLink>
     </div>
     <div class="ms-8 me-20 space-x-10">
       <RouterLink
           class="font-ubuntu font-bold text-base hover:text-black whitespace-nowrap"
           :class="{ 'text-gray-500': $route.path !== '/aboutus' }"
           to="/aboutus"
           exact-active-class="text-black">
         About Us
       </RouterLink>
       <RouterLink
           class="font-ubuntu font-bold text-base hover:text-black"
           :class="{ 'text-gray-500': $route.path !== '/services' }"
           to="/services"
           exact-active-class="text-black">
         Services
       </RouterLink>
       <RouterLink
           class="font-ubuntu font-bold text-base hover:text-black"
           :class="{ 'text-gray-500': $route.path !== '/available-positions' }"
           to="/available-positions"
           exact-active-class="text-black">
         Work
       </RouterLink>
       <RouterLink
           class="font-ubuntu font-bold text-base hover:text-black"
           :class="{ 'text-gray-500': $route.path !== '/news' }"
           to="/news"
           exact-active-class="text-black">
         News
       </RouterLink>
       <RouterLink
           class="font-ubuntu font-bold text-base hover:text-black"
           :class="{ 'text-gray-500': $route.path !== '/contacts' }"
           to="/contacts"
           exact-active-class="text-black">
         Contacts
       </RouterLink>
     </div>
     <div class="flex space-x-9">
       <div class="flex space-x-2">
         <img src="../assets/iPhone.svg" alt="Phone icon">
         <div class="flex flex-col whitespace-nowrap">
           <p>Call us</p>
           <a href="tel:(405) 555-0128">(405) 555-0128</a>
         </div>
       </div>
       <div class="flex space-x-3">
         <img src="../assets/Chat.svg" alt="Chat icon">
         <div class="flex flex-col">
           <p>Talk to us</p>
           <a href="mailto: hello@createx.com">hello@createx.com</a>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

<style scoped>

</style>